<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>指挥调度</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
    />
    <script>
        tailwind.config = {
          theme: {
            extend: {
              colors: {
                primary: '#00FFFF',
                secondary: '#00FF9D',
                accent: '#FF4757',
                danger: '#FF4757',
                success: '#00FF9D',
                warning: '#FFD166',
                info: '#64DFDF',
                light: '#0F172A',
                dark: '#0A0F1F',
                'primary-light': '#1E293B',
                'neon-blue': '#00FFFF',
                'neon-green': '#00FF9D',
                'neon-pink': '#FF4757',
                'neon-yellow': '#FFD166',
                'cyber-bg': '#0A0F1F',
                'cyber-card': '#1E293B',
                'cyber-border': '#00FFFF'
              },
              fontFamily: {
                sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
              }
            }
          }
        };
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
            }
.neon-glow {
                box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.3);
            }
            .neon-border {
                box-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
            }
            .cyber-grid {
                background-image:
                    linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
                background-size: 20px 20px;
            }
        }
    </style>
</head>
<body class="bg-cyber-bg font-sans text-white">
<!-- 顶部导航栏 -->
<header
        class="bg-cyber-card border-b border-neon-blue/30 fixed top-0 left-0 right-0 z-50"
>
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-shield-alt text-xl"> </i>
                <h1 class="text-xl font-bold">指挥调度</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="flex items-center">
                    <i class="fas fa-signal text-primary mr-1"> </i>
                    <span class="text-sm font-medium"> 满格 </span>
                </div>
                <div class="relative">
                    <i class="fas fa-bell text-lg"> </i>
                    <span
                            class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center"
                    >
                3
              </span>
                </div>
                <div class="flex items-center space-x-2">
                    <img
                            alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-white"
                            src="https://design.gemcoder.com/staticResource/echoAiSystemImages/1ddde21260f8861c0a25609e3d21bd47.png"
                    />
                    <span class="text-sm font-medium"> 张警官 </span>
                </div>
            </div>
        </div>
        <!-- 账号状态信息 -->
        <div
                class="flex justify-between items-center pt-2 border-t border-neon-blue/20"
        >
            <div>
                <p class="text-sm text-info">在线状态</p>
                <p class="text-base font-medium flex items-center">
              <span class="inline-block w-2 h-2 bg-success rounded-full mr-2">
              </span>
                    已连接指挥中心
                </p>
            </div>
            <div>
                <p class="text-sm text-info">账号名称</p>
                <p class="text-base font-medium">治安巡逻07队</p>
            </div>
            <div>
                <p class="text-sm text-info">所在对讲组</p>
                <p class="text-base font-medium">东区应急组</p>
            </div>
        </div>
    </div>
</header>
<!-- 功能集合表格 -->
<main class="container mx-auto px-4 pt-28 pb-12 cyber-grid">
    <h2
            class="text-lg font-bold mb-4 text-neon-blue border-b border-neon-blue/30 pb-2 inline-block"
    >
        功能菜单
    </h2>
    <div class="grid grid-cols-2 gap-3">
        <!-- 视频功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
                style
        >
            <div class="flex flex-col items-center text-center" style>
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                        data-ytextravalue="extra-e4t0yoe9p"
                        style
                >
                    <i
                            class="fas fa-video text-primary text-lg"
                            data-selectorname="#id-l49gc"
                            data-ytparentvalue="extra-e4t0yoe9p"
                            data-ytoriginindex="0"
                            data-ytindex="0"
                            style="opacity: 1;"
                    >
                    </i>
                </div>
                <h3 class="text-base font-medium">视频</h3>
            </div>
        </a>
        <!-- 录音功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                >
                    <i class="fas fa-microphone text-primary text-lg"> </i>
                </div>
                <h3 class="text-base font-medium">录音</h3>
            </div>
        </a>
        <!-- 消息功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2 relative"
                >
                    <i class="fas fa-comment-alt text-primary text-lg"> </i>
                    <span
                            class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center"
                    >
                5
              </span>
                </div>
                <h3 class="text-base font-medium">消息</h3>
            </div>
        </a>
        <!-- 联系人功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                >
                    <i class="fas fa-users text-primary text-lg"> </i>
                </div>
                <h3 class="text-base font-medium">联系人</h3>
            </div>
        </a>
        <!-- 对讲组功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                >
                    <i class="fas fa-walkie-talkie text-primary text-lg"> </i>
                </div>
                <h3 class="text-base font-medium">对讲组</h3>
            </div>
        </a>
        <!-- 平台设置功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                >
                    <i class="fas fa-cog text-primary text-lg"> </i>
                </div>
                <h3 class="text-base font-medium">平台设置</h3>
            </div>
        </a>
        <!-- 视频设置功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                >
                    <i class="fas fa-video-slash text-primary text-lg"> </i>
                </div>
                <h3 class="text-base font-medium">视频设置</h3>
            </div>
        </a>
        <!-- 系统设置功能 -->
        <a
                class="bg-cyber-card rounded-lg p-3 border border-neon-blue/30 btn-hover hover:border-neon-blue transition-all duration-300"
                href="javascript:void(0);"
        >
            <div class="flex flex-col items-center text-center">
                <div
                        class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center mb-2"
                >
                    <i class="fas fa-sliders-h text-primary text-lg"> </i>
                </div>
                <h3 class="text-base font-medium">系统设置</h3>
            </div>
        </a>
    </div>
</main>
<script>
    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function () {
      // 添加功能按钮点击效果
      var featureButtons = document.querySelectorAll('.btn-hover');
      featureButtons.forEach(function (button) {
        button.addEventListener('click', function () {
          var _this = this;
          this.classList.add('scale-95', 'neon-border');
          setTimeout(function () {
            _this.classList.remove('scale-95', 'neon-border');
          }, 200);
        });
      });
    });
</script>
</body>
</html>
